<template>
  <div class="home">
    <div
      v-for="(item,index) in items"
      :key="index"
      :class="index !== items.length - 1 ? 'year' : 'year-last'"
      @click="handleFold(index)"
      style="position: relative"
    >
      <div style="position: absolute; right: -6px; ">
        <i class="el-icon-time" style="color: #ddd; font-size: 24px; background-color: #fff "/>
      </div>

      <div class="year-text">
        <i class="el-icon-arrow-down" :class="['year-arrow', { 'year-arrow-rotate': is_month && item.is_fold }]"
           @click.stop="handleShowFold(index)"/>
        {{ item.index }}
      </div>

      <div v-show="is_month && item.is_fold" :class="item1.is_fold?'month-action':'month'"
           @click.stop="handleFold(index,index1)" v-for="(item1,index1) in item.children" :key="index1"
           @mouseenter="monthMouseenter($event, index1, 'month')" @mouseleave="monthTipShow = false"
      >

        <div class="month-text"></div>

        <div :class="item2.is_fold ? 'week-action' : 'week'" v-show="is_month && is_week && item1.is_fold"
             @click.stop="handleFold(index, index1, index2)" v-for="(item2, index2) in item1.children" :key="index2"
             @mouseenter="monthMouseenter($event, index2, 'week')" @mouseleave="monthTipShow = false"
        >
          <div class="week-text"></div>
        </div>
      </div>

    </div>

    <!-- 气泡 -->
    <transition name="el-fade-in-linear">
      <div class="month-tip" :style="monthTipStyle" v-show="monthTipShow">{{ monthTipText }}</div>
    </transition>

  </div>
</template>

<script>

export default {
  name: 'TimeLine',
  props: {
    items: {
      type: Array,
      default: () => ([])
    },
    is_month: {
      type: Boolean,
      default: false
    },
    is_week: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      monthTipShow: false,
      monthTipText: '',
      monthTipStyle: {},
    }
  },
  methods: {
    // 悬浮出现的气泡
    monthMouseenter(e, monthIdx, type) {
      const rect = e.target.getBoundingClientRect()
      const { left, top, width, height } = rect
      this.monthTipStyle = { left: `${left + width + 15}px`, top: `${top - 8}px` }
      this.monthTipShow = true

      this.monthTipText = type === 'month' ? `${12 - monthIdx}月` : `${4 - monthIdx}周`
    },

    handleFold(y_index, m_index, w_index) {
      this.$emit('handleFold', { y_index, m_index, w_index })
    },
    handleShowFold(y_index) {
      this.$emit('handleShowFold', y_index)
    }
  }
}
</script>

<style scoped lang="scss">
.month-tip {
  position: fixed;
  z-index: 9999;
  width: 50px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ddd;

  line-height: 25px;
  text-align: center;
  font-size: 14px;

  &::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 8px 5px 0;
    border-color: transparent #ddd transparent transparent;

    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
  }

  &::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 8px 5px 0;
    border-color: transparent #fff transparent transparent;

    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.year-arrow {
  color: #ddd;
  transition: .2s;
  margin-right: 5px;

  &:hover {
    color: #1966E2;
  }

}

.year-arrow-rotate {
  transform: rotate(0.5turn);
}

.home {
  width: 86px;
}

.year {
  height: auto; /*高度由内容决定*/
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}

.year::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-size: 22px 22px;
  position: absolute;
  right: -6px;
  top: 2px;
  z-index: 9;
  pointer-events: all;
}

.year::after {
  content: "";
  width: 3px;
  height: 100%;
  background-color: #dddddd;
  position: absolute;
  top: 22px;
  right: 4px;
}

.year-last {
  height: auto; /*高度由内容决定*/
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}

.year-last::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-size: 22px 22px;
  position: absolute;
  right: -6px;
  top: 2px;
  z-index: 9;
  pointer-events: all;
}

.year-last::after {
  content: "";
  width: 3px;
  height: calc(100% - 36px);
  background-color: #ddd;
  position: absolute;
  top: 22px;
  right: 4px;
}

.year-img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  cursor: pointer;
}

.year-text {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 20px;
  position: relative;
  color: #1966E2;
  display: flex;
  align-items: center;
}

.month-text {
  height: 18px;
  font-size: 18px;
  margin-bottom: 18px;
  position: relative;
  color: #656565;
}

.week-text {
  height: 14px;
  font-size: 12px;
  margin-bottom: 10px;
  position: relative;
  color: #656565;
}

.month {
  height: auto; /*高度由内容决定*/
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
  pointer-events: none;
}

.month-action::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: rgba(255, 142, 66, 1);
  position: absolute;
  right: -2px;
  z-index: 9;
  pointer-events: all;
}

.month::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 100%;
  border: 1px solid #ddd;
  background-color: #FFFFFF;
  position: absolute;
  right: -2px;
  z-index: 9;
  pointer-events: all;
}

.week {
  height: auto; /*高度由内容决定*/
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
  pointer-events: none;
}

.week-action::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: rgba(255, 142, 66, 1);
  position: absolute;
  right: 0;
  z-index: 10;
  pointer-events: all;
}

.week::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: rgba(26, 102, 226, 1);
  position: absolute;
  right: 0;
  z-index: 10;
  pointer-events: all;
}

@media (max-width: 1024px) {
  .year-text {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 20px;
    position: relative;
    color: #1966E2;
    display: flex;
    align-items: center;
  }
}
</style>
